<template>
  <div>
    <el-form :model="form" label-width="100px">
      <el-form-item label="题干：" required>
        <template v-if="!disabled">
          <!-- <div v-for="(item, key) in form.question_stem" :key="key">
            <el-input type="textarea" rows="5" v-if="item.type === 'text'" v-model="item.content"
              @change="onChangeStemText">
            </el-input>
          </div>
          <upload :multiple="false" ref="upload" text="上传图片" @onSuccess="onImgSuccess"></upload> -->
          <quill-editor  :content="form.question_stem" :options="editorOption" @change="onEditorChange($event)" />
        </template>

        <template v-if="disabled">
          <!-- <div v-for="(item, key) in form.question_stem" :key="key">
            <el-input :disabled="disabled" rows="5" type="textarea" v-if="item.type === 'text'" v-model="item.content"
              @change="onChangeStemText">
            </el-input>
          </div> -->
          <quill-editor @focus="quillEditorFocus($event)" :content="form.question_stem" :options="editorOption" />
        </template>

        <!-- <template v-if="disabled">
          <div class="image-list">
            <div class="image-item" v-for="(item, key) in imageList" :key="key">
              <img :src="item.content" class="setm-img" v-if="item.type === 'img'">
            </div>
          </div>
        </template>

        <template v-if="!disabled">
          <div class="image-list">
            <div class="image-item" v-for="(item, index) in form.question_stem" :key="index">
              <template v-if="item.type === 'img'">
                <img :src="item.content" class="setm-img">
                <div v-if="!disabled" class="close" @click="deleteImg(index)"><i class="el-icon-error"></i></div>
              </template>
            </div>
          </div>
        </template> -->
      </el-form-item>
      <el-form-item label="难度系数：" required>
        <el-slider v-model="form.difficulty" style="width:320px" :disabled="disabled"></el-slider>
      </el-form-item>
      <el-form-item label="优质题：" required>
        <el-switch v-model="form.high_quality" :active-value="1" :inactive-value="2" :disabled="disabled">
        </el-switch>
      </el-form-item>
      <el-form-item label="图文解析：">
        <!-- <el-input :disabled="disabled" rows="5" type="textarea" v-model="item.content" @change="onChangeAnalysisText">
          </el-input> -->
        <template v-if="!disabled">
          <quill-editor :content="form.analysis_text" :options="editorOption" @change="onEditorAnswerChange($event)" />
        </template>
        <template v-else>
          <quill-editor @focus="quillEditorFocus($event)" :content="form.analysis_text" :options="editorOption" />
        </template>

      </el-form-item>
      <el-form-item label="视频解析：">
        <upload v-if="!disabled" :multiple="false" accept=".mp4" text="上传视频" @onSuccess="onVideoSuccess"></upload>
        <video :src="form.analysis_video" :poster="form.analysis_video + '?vframe/jpg/offset/1'" v-if="form.analysis_video"
          class="video" controls="controls"></video>
        <div v-if="disabled && !form.analysis_video" class="empty">暂无~</div>
      </el-form-item>


      <div class="group" v-for="(item, index) in form.list" :key="item.id">
        <div class="delete-button" v-if="!disabled">
          <el-button size="mini" icon="el-icon-delete" circle @click="handleClickDeleteFill(item, index)"></el-button>
        </div>
        <div class="small-order-number">第{{ index + 1 }}小题</div>
        <el-form-item label="选项：" required>
          <div class="order-number" v-for="(select, k) in item.question_select" :key="k">
            <el-input placeholder="输入选项" v-model="select.title" :disabled="disabled">
              <template slot="prepend">{{ k | formatOrderNumber }}</template>
              <el-button v-if="!disabled" @click="handleClickDelete(select, index, k)" slot="append" icon="el-icon-delete"></el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item v-if="!disabled">
          <div class="add-button">
            <el-button size="mini" @click="handleClickAdd(item, index)">添加选项</el-button>
          </div>
        </el-form-item>

        <el-form-item label="正确答案：" required>
          <el-checkbox-group v-model="item.right_answer" :disabled="disabled">
            <el-checkbox :label="answer" v-for="(answer, key) in item.answer_select" :key="key"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>

      
      <div class="add-button-small" v-if="!disabled">
        <el-button type="primary" size="mini" @click="handleClickAddFill">添加小题</el-button>
      </div>
    </el-form>

  </div>
</template>

<script>
import orderNumber from '@/utils/order-number.js'
import Upload from "@/components/Upload";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import toolbarOptions from './toolbarOptions.js'
export default {
  components: {
    Upload,
    quillEditor
  },
  filters: {
    formatOrderNumber(n) {
      return orderNumber[n]
    }
  },
  props: {
    questionType: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    info: {
      handler(info) {
        if (!info.question_select) {
          return false;
        }
        let form = JSON.parse(JSON.stringify(info))
        let list = [];
        info.question_select.forEach((item, key) => {
          list.push(orderNumber[key]);
        })
        // if (form.answer_analysis == null) {
        //   form.answer_analysis = [{ type: 'text', content: '' }, { type: 'video', content: '' }]
        // } else {
        //   if (form.answer_analysis.length === 0) {
        //     form.answer_analysis = [{ type: 'text', content: '' }, { type: 'video', content: '' }]
        //   } else {

        //     let hasText = form.answer_analysis.some(item => {
        //       return item.type === 'text'
        //     })
        //     let hasVideo = form.answer_analysis.some(item => {
        //       return item.type === 'video'
        //     })
        //     if (!hasVideo) {
        //       form.answer_analysis.push({ type: 'video', content: '' })
        //     }
        //     if (!hasText) {
        //       form.answer_analysis.push({ type: 'text', content: '' })
        //     }
        //   }
        // }

        this.form = form;
        this.answer = list;


      },
      immediate: true,
      deep: true,
    }
  },
  computed: {
    imageList() {
      return this.form.question_stem.filter(item => {
        return item.type === 'img'
      })
    }
  },
  data() {
    return {
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
      video: '',
      images: [],
      analysisText: '',
      form: {
        question_type: '',
        question_stem: '',
        difficulty: 0,
        high_quality: 1,
        analysis_text: '',
        analysis_video: '',
        list: [
          {
            question_select: [{
              title: ''
            }],
            right_answer: [],
            answer_select: ['A']
          }
        ],

      }
    }
  },
  created() {
    this.form.question_type = this.questionType
  },
  methods: {
    showData() {
      console.log(this.form)
    },
    //添加小题
    handleClickAddFill() {
      this.form.list.push({
        question_select: [{
          title: ''
        }],
        right_answer: [],
        answer_select: ['A']
      })
    },
    //删除小题
    handleClickDeleteFill(item, index) {
      if (this.form.list.length > 1) {
        this.form.list.splice(index, 1)
      } else {
        this.$message({
          message: '至少保留一个小题！',
          type: 'warning'
        });
      }
    },
    //添加习题
    handleClickAdd(item, index) {
      this.form.list[index].question_select.push({
        title: ''
      })
      this.handleCheckbox(index);
    },
    //处理正确答案
    handleCheckbox(index) {
      console.log(index)
      let anwser = this.form.list[index].answer_select;
      anwser.splice(0, anwser.length);
      this.form.list[index].question_select.forEach((item, key) => {
        anwser.push(orderNumber[key])
      })
    },
    //删除习题
    handleClickDelete(item, index, key) {
      if (this.form.list[index].question_select.length > 1) {
        this.form.list[index].question_select.splice(key, 1)
        this.handleCheckbox(index);
      } else {
        this.$message({
          message: '至少保留一条选项！',
          type: 'warning'
        });
      }

    },
    //视频解析改变
    onChangeAnalysisVideo() {
      let hasVideo = this.form.answer_analysis.some(item => {
        return item.type === 'video'
      })
      if (hasVideo) {
        this.form.answer_analysis.forEach(item => {
          if (item.type === 'video') {
            item.content = this.video;
          }
        })
      } else {
        this.form.answer_analysis.push({
          type: 'video',
          content: this.video
        })
      }
    },
    //答案解析文字改变
    onChangeAnalysisText(text) {
      let hasText = this.form.answer_analysis.some(item => {
        return item.type === 'text'
      })
      if (hasText) {
        this.form.answer_analysis.forEach(item => {
          if (item.type === 'text') {
            item.content = text;
          }
        })
      } else {
        this.form.answer_analysis.push({
          type: 'text',
          content: text
        })
      }
    },
    //题干文字改变
    onChangeStemText(text) {

    },
    //题干图片改变
    onChangeStemImage() {
      this.images.forEach(item => {
        this.form.question_stem.push({
          type: 'img',
          content: item
        })
      })

    },
    //视频上传回调
    onVideoSuccess(url) {
      this.video = url[0];
      this.form.analysis_video = url[0];
      //this.onChangeAnalysisVideo();
    },
    //图片上传回调
    onImgSuccess(url) {
      this.images = url;
      this.onChangeStemImage();
      this.$refs.upload.fileList.splice(0, this.$refs.upload.fileList.length)
    },
    //删除图片
    deleteImg(index) {
      this.images.splice(index-1, 1)
      this.form.question_stem.splice(index, 1)
      console.log(this.form.question_stem)
    },
    //答案解析富文本内容改变
    onEditorAnswerChange(event) {
      this.form.analysis_text = event.html
    },
    //题干富文本内容改变
    onEditorChange(event) {
      this.form.question_stem = event.html
    },
    //设置富文本不可编辑
    quillEditorFocus(event) {
			event.enable(false)
		},
  },
}
</script>
<style lang="scss" scoped>
.order-number {
  margin-bottom: 10px;
}

.add-button {
  margin-top: -30px;
}

.video {
  height: 200px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;

  .image-item {
    position: relative;

    .setm-img {
      max-height: 120px;
      margin-right: 5px;
      border: 1px solid #ccc;
      padding: 2px;
    }

    .close {
      position: absolute;
      top: -5px;
      right: -5px;
      font-size: 24px;
      cursor: pointer;
      background-color: #fff;
      line-height: 1;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      z-index: 1;
    }
  }

}

.add-button-small {
  margin-left: 100px;
}

.delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
}

.group {
  position: relative;
  margin-left: 100px;
  padding: 50px 20px 20px 20px;
  border: 1px solid #eee;
  margin-bottom: 15px;
  background-color: #eee;

  .small-order-number {
    position: absolute;
    top: 0;
    left: 15px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #eee;
    font-weight: bold;
  }
}

.empty {
  color: #333
}
</style>
